<!--
 * @Description: 伪类选择器
 * @Author: rendc
 * @Date: 2021-08-06 14:21:36
 * @LastEditors: rendc
 * @LastEditTime: 2021-08-06 14:36:49
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    /* 选中app类子代的独生子元素 */
    /* .app>*:only-child {
      color: hotpink;
    } */
    /* 选中app类子代的第一个孩子元素 */
    /* .app>*:first-child {
      color: hotpink;
    } */
    /* 选中app类子代的最后一个孩子元素 */
    /* .app>*:last-child {
      color: hotpink;
    } */
    /* 选中app类子代的第n个孩子元素 n从1开始*/
    /* .app>*:nth-child(3) {
      color: hotpink;
    } */
    /* 选中app类子代的倒数第n个孩子元素 n从1开始*/
    /* .app>*:nth-last-child(1) {
      color: hotpink;
    } */
    /* 选中app类子代的每种类型的第1个孩子元素*/
    /* .app>*:first-of-type {
      color: hotpink;
    } */
    /* 选中app类子代的每种类型的最后1个孩子元素*/
    /* .app>*:last-of-type {
      color: hotpink;
    } */
    /* 选中app类子代的每种类型的第n个孩子元素 n从1开始*/
    /* .app>*:nth-of-type(3) {
      color: hotpink;
    } */
    /* 选中app类子代的每种类型的倒数第n个孩子元素 n从1开始*/
    /* .app>*:nth-last-of-type(3) {
      color: hotpink;
    } */
  </style>
</head>

<body>
  <div class="app">
    <div>123-1</div>
    <div>123</div>
    <p>123-p1</p>
  </div>
  <div class="app">
    <div>223</div>
    <div>223-2</div>
    <span>223-2-span</span>
    <div>223-3</div>
    <p>223-2-p</p>
  </div>
  <div class="app">
    <div>323</div>
  </div>
  <div class="app">
    <div>423</div>
  </div>
</body>

</html>